<template>
  <div class="Page">
    <div
      :class="collapse ? 'menuleft-60' : 'menuleft-100'"
      :style="{ '--color': store.theme }"
    >
      <el-menu
        active-text-color="#ffd04b"
        :background-color="store.theme"
        text-color="#fff"
        :router="true"
        :default-active="defaultActive"
        :collapse="collapse"
        :collapse-transition="false"
      >
        <el-menu-item :disabled="true">
          <el-icon>
            <img
              src="@/assets/image/logo/logo-white.png"
              alt=""
              srcset=""
              width="18px"
              height="18px"
            />
          </el-icon>
          <span>数据魔方</span>
        </el-menu-item>
        <el-menu-item
          v-for="(item, index) in routerData"
          :key="index"
          :index="item.path"
        >
          <el-icon><component :is="item.meta.icon" /></el-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
      <!-- 收起打开按钮 -->
      <div class="Unfold-close" :style="{ '--color': store.theme }">
        <el-icon @click="collapse = !collapse"
          ><component :is="collapse ? 'ArrowRight' : 'ArrowLeft'" color="#fff"
        /></el-icon>
      </div>
      <!-- 设置 -->
      <div class="Unfold-close" style="bottom: 10px">
        <el-icon @click="changeshow = true"
          ><component is="Setting" color="#fff"
        /></el-icon>
      </div>
    </div>
    <!-- 右侧弹出框 -->
    <el-drawer v-model="changeshow" direction="rtl">
      <template #header>
        <div>设置</div>
      </template>
      <template #default>
        <div >
          <el-row>
            <el-col :span="24">页面主题</el-col>
          </el-row>
          <el-row class="mt-6">
            <el-col :span="6">
              <el-button class="themecolor1" @click="store.theme = '#545c64'">深灰色</el-button>
            </el-col>
            <el-col :span="6">
              <el-button class="themecolor2" @click="store.theme = '#003817'">墨绿色</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #footer>
        <div @click.stop="quitLogin">退出登录</div>
      </template>
    </el-drawer>
    <!-- 主体部分 -->
    <div class="Page-content">
      <router-view />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();

import { useUserStore } from "@/stores/index";
const store = useUserStore();
let routerData = ref<any>([]);
let defaultActive = ref<string>("");
let collapse = ref<boolean>(false);
let changeshow = ref<boolean>(false);
routerData.value = router.options.routes[0].children;
defaultActive.value = router.options.routes[0].redirect?.toString() || "";
//退出登录
const quitLogin = () => {
  // store.quitLogin();
  // router.push("/login");
  ElMessage({
    message: "退出成功",
    type: "success",
  });
};
</script>
<style scoped lang="less">
.Page {
  display: flex;
  height: calc(100vh - 0px);
  width: 100vw;
  background-color: #f0f2f5;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.Page-content {
  flex: 1;
  overflow: hidden;
  transition: all 0.3s;
}
.menuleft-100 {
  width: 130px;
  height: 100%;
  background-color: var(--color);
  color: #fff;
  overflow: hidden;
}
.menuleft-60 {
  width: 63.33px;
  height: 100%;
  background-color: var(--color);
  color: #fff;
  overflow: hidden;
}
.Unfold-close {
  position: absolute;
  bottom: 60px;
  left: calc(63.33px / 2);
  transform: translateX(-50%);
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: var(--color);
  cursor: pointer;
  z-index: 999;
}
</style>
